<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部门领料</title>
    <link rel="stylesheet" href="../../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/cangKu/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_i6a3ds1y1cc/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_w2o0np88fp/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_2yyplo81kd3/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/font_7d5zyips3wc/iconfont.css">
    <link rel="stylesheet" href="../../css/cangKuGuanLi/buMenLingLiao.css">
    <script src="../../js/jquery-3.1.1.js"></script>
    <script src="../../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../js/allData.js"></script>
</head>

<body>
    <div class="container ">
        <div class="header">
            <h4>部门领料</h4>
            <!-- 时间输入框 -->
            <div class="top_box clear">
                <!-- 输入 -->
                <div class="search_box">
                    <div>
                        <label for="">开始时间</label>
                        <input type="date" class="startTime">
                    </div>
                    <div>
                        <label for="">结束时间</label>
                        <input type="date" class="endTime">
                    </div>
                    <div>
                        <label for="">领用部门</label>
                        <select name="" id="">
                            <option value="0">全部</option>
                            <option value="1">维修一部</option>
                            <option value="2">维修二部</option>
                            <option value="3">维修三部</option>
                        </select>
                    </div>
                    <div>
                        <label for="">审核状态</label>
                        <select name="" id="">
                            <option value="0">全部</option>
                            <option value="1">待审核</option>
                            <option value="2">审核通过</option>
                            <option value="3">审核拒绝</option>
                        </select>
                    </div>

                    <div>
                        <label for="">搜索</label>
                        <input type="text" class="danhao" onfocus="this.placeholder=''"
                            onblur="this.placeholder='请输入领料单号'" placeholder="请输入领料单号">
                    </div>
                </div>
                <div class="search_btn_box">
                    <button type="button" class="chongzhi"><span class="iconfont icon-reset">重置</span></button>
                    <button type="button" class="chaxun"><span class="iconfont icon-sousuo">查询</span></button>
                </div>
            </div>
        </div>

    </div>



    <table class="table">
        <thead id="thead">
            <tr>
                <th>全选</th>
                <th>领料日期</th>
                <th>领料单号</th>
                <th>领料部门</th>
                <th>制单人</th>
                <th>审核状态</th>
                <th>审核人</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id='tbody'>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>2020-05-13</td>
                <td>968827059</td>
                <td>维修一部</td>
                <td>库管A</td>
                <td>待审核</td>
                <td>—— ——</td>
                <td>
                    <span class="iconfont icon-yanjing_xianshi"></span>
                    <span class="iconfont icon-shanchu"></span>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>2020-05-13</td>
                <td>968827059</td>
                <td>维修一部</td>
                <td>库管A</td>
                <td>审核通过</td>
                <td>高圆圆</td>
                <td>
                    <span class="iconfont icon-yanjing_xianshi"></span>
                    <span class="iconfont icon-shanchu"></span>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <div class="footer">
            <button type="button" class="shanchu"><span class="iconfont icon-shanchu"></span> 删除</button>
            <button type="button" class="daochu"><span class="iconfont icon-daochu-xian"></span> 导出</button>
        </div>
        <div class="page_box clear">
            <div class="pageNum">
                <span>共<span>10</span>页/ <span>100</span>条数据</span>
                <div class="pageBtn_box clear">
                    <div id="preBtn" onclick="prevBtn()">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </div>
                    <div id="pageBox">

                    </div>
                    <div id="nextBtn" onclick="nextBtn()">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>

                <div class="tiaozhuan_box">
                    <span>转至</span>
                    <input type="text" value="1" id="tiaozhuan">
                    <span>页</span>

                    <a href="#" onclick="tiaozhuan()">跳转</a>
                </div>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除吗该条数据吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- 提示框 -->

        <div class="tishikuang">
            <i class="glyphicon glyphicon-ok"></i>
            删除成功
        </div>
        <script>
            //1.获取节点
            let maxPage;
            let thePage = 0;
            let fenyeList = buMenLingLiao;

            // 渲染页面
            function showTable(data) {
                $('#tbody').html('');
                $.each(data, (index, item) => {
                    $('#tbody').append(`
                    <tr>
                        <td>
             <input type="checkbox">
         </td>
                        <td>${item.date}</td>
                        <td>${item.danhao}</td>
                        <td>${item.buMen}</td>
                        <td>${item.zhidan}</td>
                        <td>${item.zhuangtai}</td>
                        <td>${item.shenheren}</td>
                  
                        <td>
                            <button class="btn_chakan">
                                <i class="glyphicon glyphicon-eye-open"></i>
                            </button>
                            <button class="btn_shanchu del" data-id = '${item.date}' data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-trash"></i>    
                            </button>
                        </td>
                    </tr>
                `)
                })
            }




            // 根据数据源渲染每一页的数据
            function fenye(data, yema) {
                let qishiye = (yema - 1) * 9;
                let xuanranArr = data.slice(qishiye, qishiye + 9);
                showTable(xuanranArr);

                thePage = yema;

                let num = $('.pageItem').text();
                // console.log(num.length);
                for (let i = 0; i < num.length; i++) {
                    $('.pageItem').eq(i).css({
                        backgroundColor: '',
                        color: '#969494'
                    })
                }
                $('.pageItem').eq(yema - 1).css({
                    backgroundColor: '#6554C0',
                    color: '#fff'
                })
            }

            showTable(buMenLingLiao)
            fenye(buMenLingLiao, 1)



            // 根据页码渲染分页按钮
            function xuanranPage(data) {
                maxPage = Math.ceil(data.length / 9);
                $('#pageBox').html('')
                for (let i = 1; i <= maxPage; i++) {
                    $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
                }
            }
            xuanranPage(buMenLingLiao)
            fenye(buMenLingLiao, 1)

            // 点击按钮，实现页面渲染新数据
            $('#pageBox').on('click', '.pageItem', function () {
                let num = parseInt($(this).text());
                fenye(buMenLingLiao, num)
            })

            // 上一页
            function prevBtn() {
                if (thePage != 1) {
                    let page = thePage - 1;
                    fenye(buMenLingLiao, page)
                }
            }

            //下一页
            function nextBtn() {
                if (thePage < maxPage) {
                    let page = thePage + 1;
                    fenye(buMenLingLiao, page)
                }
            }

            // 跳转
            function tiaozhuan() {
                let val = document.getElementById('tiaozhuan').value;
                fenye(buMenLingLiao, val)
            }

            let num = []
            $('#tbody').on('click', '.del', function () {
                var data_item = JSON.parse($(this).attr('data-item'));
                var data_id = $(this).attr('data-id');
                $('#myModal').modal('toggle')
                num.push(data_id)
            })

            function del() {
                let time
                for (let i = 0; i < buMenLingLiao.length; i++) {
                    if (buMenLingLiao[i].danhao == num[0]) {
                        buMenLingLiao.splice(i, 1);
                        num = [];
                        time = setInterval(() => {
                            $('.tishikuang').css({
                                position: 'absolute',
                                top: (size[0] - 100) / 2 + 'px',
                                left: (size[1] - 300) / 2 + 'px',
                                display: 'block'
                            })
                        }, 500);
                        break;
                    }
                }
                $('#myModal').modal('hide')
                xuanranPage(buMenLingLiao);
                fenye(buMenLingLiao, thePage);
                setTimeout(() => {
                    clearInterval(
                        time
                    )
                    $('.tishikuang').css({
                        display: 'none'
                    })
                }, 1500);
            }

            // 查找
            let data
            $('.chaxun').click(function () {
                let startTime = $('.startTime').val();
                let endTime = $('.endTime').val();
                let danhao = $('.danhao').val();

                for (let i = 0; i < fenyeList.length; i++) {

                    console.log(fenyeList[i].startTime);

                }

            })
            // 重置
            $('.chongzhi').click(function () {
                fenyeList = buMenLingLiao
                show(1)
            })

            show(1)

            function show(num) {
                xuanranPage(fenyeList);
                fenye(fenyeList, 1)
            }
   // 提示框
   let size = []

function tishi() {
    let tishikuang = document.getElementsByClassName('tishikuang');
    let top = document.body.clientHeight
    let left = document.body.clientWidth
    size.push(top, left);
}
tishi()
// console.log(size);
$('.tishikuang').css({
    position: 'absolute',
    top: (size[0] - 100) / 2 + 'px',
    left: (size[1] - 100) / 2 + 'px',
    display: 'none'
})

        </script>
</body>

</html>